<template>

    <a-space direction="vertical" size="large" :style="{marginLeft:'76.7%',marginTop:'10px'}">

        <a-input-search :style="{width:'320px'}" v-model="searchText" placeholder="请输入标题或内容关键词" search-button @search="search">

                <template #button-icon>
                    <icon-search/>
                </template>
                <template #button-default>
                    搜索
                </template>


        </a-input-search>
    </a-space>

    <a-list
            class="list-demo-action-layout"
            :bordered="false"
            :data="infoArr[0]"
            :pagination-props="paginationProps"
    >
        <template #item="{ item }">


            <a-list-item class="list-demo-item" action-layout="vertical">


                <template #extra>
                    <div className="image-area">
                        <img alt="图片描述" :src="item.imageUrl" style="width: 300px;height: 150px"/>
                    </div>
                </template>
                <a-list-item-meta
                        :title="item.title"

                >

                </a-list-item-meta>

                <div>
                    <a-tag color="green" v-show="false">
                        <icon-check-circle-fill/>
                        已找到
                    </a-tag>

                    <a-tag color="blue" v-show="true">

                        <icon-search/>
                        查找中
                    </a-tag>

                    <a-tag color="red" v-show="false">
                        <icon-close/>
                        已失效
                    </a-tag>

                    <a-tag color="blue" style="margin-left: 20px">
                        <icon-location/>
                        {{item.address}}
                    </a-tag>
                </div>

                <a-list-item-meta
                        :description="item.description"
                >

                </a-list-item-meta>

              <!--  <span style="margin-left: 8px;"><icon-eye/>&nbsp;{{83}}</span>
                <span style="margin-left: 10px;"><icon-message />&nbsp;{{83}}</span>-->


                <a-space :style="{width: '100px',marginLeft: '700px' ,marginTop: '1%'}">
                    <a-button type="outline" shape="round" :style="{width: '100px',marginTop: '1%'}"
                              @click="detail(item.id)">查看详情
                    </a-button>

                    <a-button type="outline" shape="round" status="danger"
                              :style="{width: '100px' ,marginTop: '1%'}"
                              v-if="userRole===1||currentUser===item?.createUser?.id "
                              @click="deletePost(item.id)"
                    >
                        删除帖子
                    </a-button>
                </a-space>
            </a-list-item>

        </template>

    </a-list>
</template>

<script  setup>
    import {reactive, watch,inject} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";

    const route = useRoute();
    const router = useRouter();

    const detail = (id) => {
        router.push({
            path: '/detail',
            query: {id},

        })

    }

    const searchText=ref('')

    //用关键词查询帖子
    const search=async ()=>{
        const res = await myAxios.get("/post/search", {
            params: {
                searchText: searchText.value
            },
        })
        if (res?.code === 0) {
            dataSource.value = res.data;

        } else {
            message.error(res.description ? `${res.description}` : '请求失败！')
        }
    }

    const currentUser = ref({})
    const userRole=ref('未登录');
    const dataSource = reactive({})
    onMounted(async () => {

        //获取帖子列表
        const listRes = await myAxios.get("/post/list", {
            params: {
                pageSize: 8,
                pageNum: 1,
            },
        })
        if (listRes?.code === 0) {
            dataSource.value = listRes.data;

        } else {
            message.error('请求失败！')
        }

        //从远程处获取用户信息, skipInterceptor: true跳过登录检查
        const res = await myAxios.get('/user/current');
        //后端返回的code是0,则获取到了用户的信息，然后返回
        if (res.code == 0) {
            currentUser.value= res.data.id
            userRole.value=res.data.userRole
        } else {

        }

    })

    //删除帖子
    const deletePost=async (id)=>{

        const res = await myAxios.post('/post/delete',{
            id
        });
        if (res.code === 0) {
            message.success("删除成功！")
            location.reload()
        } else {
            message.error('删除失败！' + res.description ? `${res.description}` : '')
        }
    }

    const infoArr = ref([])
    watch(() => dataSource, (newValue, oldValue) => {
            if (newValue?.value) {

                dataSource.value = newValue.value
                infoArr.value = [dataSource.value]
            }
        }, {immediate: true, deep: true}
    )

</script>
